<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <!-- 第一个el-tabs组件 -->
    <el-tabs v-model="subTabsName1">
      <el-tab-pane label="采购单信息" name="purchaseOrder">
        <!-- 采购单信息表格 -->
        <el-form
          ref="formRef"
          :model="list"
          :rules="formRules"
          v-loading="loading"
          label-width="0px"
          :inline-message="true"
        >
          <el-table :data="list" :stripe="true" :show-overflow-tooltip="true" class="-mt-10px">
            <el-table-column label="序号" type="index" width="80" align="center"/>
            <el-table-column label="采购单编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.purchaseOrderId`" class="mb-0px!">
                  <el-tooltip :content="row.purchaseOrderId" placement="top">
                    <el-input v-model="row.purchaseOrderId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column label="一级库整合单编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.integrateId`" class="mb-0px!">
                  <el-tooltip :content="row.integrateId" placement="top">
                    <el-input v-model="row.integrateId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="主单编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.mainOrderId`" class="mb-0px!">
                  <el-tooltip :content="row.mainOrderId" placement="top">
                    <el-input v-model="row.mainOrderId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column label="采购时间" min-width="180">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.orderTime`" class="mb-0px!">
                  <el-date-picker v-model="row.orderTime" type="date" disabled />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="供应商编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.supplierId`" class="mb-0px!">
                  <el-tooltip :content="row.supplierId" placement="top">
                    <el-input v-model="row.supplierId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="合计价格" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
                  <el-tooltip :content="row.totalPrice" placement="top">
                    <el-input v-model="row.totalPrice" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.remark`" class="mb-0px!">
                  <el-tooltip :content="row.remark" placement="top">
                    <el-input v-model="row.remark" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="90" v-if="false">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.status`" class="mb-0px!">
                  <dict-tag :type="DICT_TYPE.PURCHASE_APPLY_STATUS" :value="row.status" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="创建者" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.creator`" class="mb-0px!">
                  <el-tooltip :content="row.creator" placement="top">
                    <el-input v-model="row.creator" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="180">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.createTime`" class="mb-0px!">
                  <el-date-picker v-model="row.createTime" type="date" disabled />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="120px">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="PurPurchaseOpenForm('update', scope.row.id)"
                    v-hasPermi="['erp:pur-purchase-order:update']"
                  >
                    详情
                  </el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- 第二个el-tabs组件 -->
    <el-tabs v-model="subTabsName2">
      <el-tab-pane label="发票信息" name="invoice">
        <!-- 发票信息表格 -->
        <el-form
          ref="invoiceFormRef"
          :model="invoiceList"
          :rules="invoiceFormRules"
          v-loading="loading"
          label-width="0px"
          :inline-message="true"
        >
          <el-table
            :data="invoiceList"
            :stripe="true"
            :show-overflow-tooltip="true"
            class="-mt-10px"
          >
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column label="发票编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.invoiceNumber`" class="mb-0px!">
                  <el-tooltip :content="row.invoiceNumber" placement="top">
                    <el-input v-model="row.invoiceNumber" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="供应商编号" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.supplierId`" class="mb-0px!">
                  <el-tooltip :content="row.supplierId" placement="top">
                    <el-input v-model="row.supplierId" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="发票金额" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.invoiceValue`" class="mb-0px!">
                  <el-tooltip :content="row.invoiceValue" placement="top">
                    <el-input v-model="row.invoiceValue" disabled />
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="发票图片" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.fileUrl`" class="mb-0px!">
                  <el-image
                    v-if="row.fileUrl"
                    :src="row.fileUrl"
                    style="width: 100px; height: 100px"
                    :preview-src-list="[row.fileUrl]"
                    fit="cover"
                    :preview-teleported="true"
                  />
                  <span v-else>无图片</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="180">
              <template #default="{ row, $index }">
                <el-form-item :prop="`${$index}.createTime`" class="mb-0px!">
                  <el-date-picker v-model="row.createTime" type="date" disabled />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- 第三个el-tabs组件 -->
<el-tabs v-model="subTabsName3">
  <el-tab-pane label="随货同行单信息" name="supplierSendOrder">
    <!-- 随货同行单表格 -->
    <el-form
      ref="supplierSendOrderFormRef"
      :model="supplierSendOrderList"
      v-loading="loading"
      label-width="0px"
      :inline-message="true"
    >
      <el-table
        :data="supplierSendOrderList"
        :stripe="true"
        :show-overflow-tooltip="true"
        class="-mt-10px"
      >
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="编号" prop="id" v-if="false" />
        <el-table-column label="随货同行单编号" prop="outOrderId" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.outOrderId`" class="mb-0px!">
              <el-tooltip :content="row.outOrderId" placement="top">
                <el-input v-model="row.outOrderId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="一级库整合单编号" prop="integrateId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.integrateId`" class="mb-0px!">
              <el-tooltip :content="row.integrateId" placement="top">
                <el-input v-model="row.integrateId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="purchaseOrderId" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.purchaseOrderId`" class="mb-0px!">
              <el-tooltip :content="row.purchaseOrderId" placement="top">
                <el-input v-model="row.purchaseOrderId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="供应商编号" prop="supplierId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.supplierId`" class="mb-0px!">
              <el-tooltip :content="row.supplierId" placement="top">
                <el-input v-model="row.supplierId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" prop="sendTime" min-width="180">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.sendTime`" class="mb-0px!">
              <el-date-picker v-model="row.sendTime" type="date" disabled :formatter="dateFormatter" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="合计价格(元)" prop="totalPrice" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
              <el-tooltip :content="row.totalPrice" placement="top">
                <el-input v-model="row.totalPrice" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- <el-table-column label="打印状态" prop="status" min-width="90">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.status`" class="mb-0px!">
              <dict-tag :type="DICT_TYPE.ERP_PRINT_STATUS" :value="row.status" />
            </el-form-item>
          </template>
        </el-table-column> -->
        <el-table-column label="备注" prop="remark" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.remark`" class="mb-0px!">
              <el-tooltip :content="row.remark" placement="top">
                <el-input v-model="row.remark" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="流程实例的编号" prop="processInstanceId" min-width="150" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.processInstanceId`" class="mb-0px!">
              <el-tooltip :content="row.processInstanceId" placement="top">
                <el-input v-model="row.processInstanceId" disabled />
              </el-tooltip>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="180" v-if="false">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.createTime`" class="mb-0px!">
              <el-date-picker v-model="row.createTime" type="date" disabled :formatter="dateFormatter" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-form-item class="mb-0px!">
              <el-button
                link
                type="primary"
                @click="openForm('update', row.id)"
                v-hasPermi="['erp:supplier-send-order:update']"
              >
                详情
              </el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-tab-pane>
</el-tabs>
    <el-form-item label="审批意见">
      <el-input v-model="approvalOpinion" type="textarea" :rows="4" placeholder="请输入审批意见" />
    </el-form-item>
    <template #footer>
      <el-button @click="submitForm" type="success" >通过</el-button>
      <el-button @click="handleReject" type="danger">未通过</el-button>
    </template>
    
  </Dialog>

  <!-- 随货同行单表单弹窗：添加/修改 -->
  <SupplierSendOrderForm11 ref="SupplierSendFormRef"/>
  <!-- 采购单表单弹窗：添加/修改 -->
  <PurPurchaseOrderForm11 ref="PurPurchaseOrderFormRef"/>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { PurPurchaseOrderApi, PurPurchaseOrderVO } from '@/api/erp/purpurchaseorder'
import { InvoiceApi, InvoiceVO } from '@/api/erp/invoice'
import { InvoiceCheckListApi, InvoiceCheckListVO } from '@/api/erp/invoicechecklist'
import {SupplierSendOrderVO,SupplierSendOrderApi} from '@/api/erp/suppliersendorder'
import { InvoiceIntegrationApi, InvoiceIntegrationVO } from '@/api/erp/invoiceintegration'
import { dateFormatter } from '@/utils/formatTime'
import SupplierSendOrderForm11 from './SupplierSendOrderForm11.vue'
import PurPurchaseOrderForm11 from './PurPurchaseOrderForm11.vue'
/** ERP 发票查询 表单 */
defineOptions({ name: 'InvoiceCheckListForm' })

const loading = ref(true) // 列表的加载中
const list = ref<PurPurchaseOrderVO[]>([]) // 列表的数据
const invoiceList = ref<InvoiceVO[]>([]) // 列表的数据
const supplierSendOrderList = ref<SupplierSendOrderVO[]>([]) // 列表的数据

const formRules = reactive({
  id: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
  purchaseOrderId: [{ required: true, message: '采购单编号不能为空', trigger: 'blur' }],
  integrateId: [{ required: true, message: '一级库整合单编号不能为空', trigger: 'blur' }],
  mainOrderId: [{ required: true, message: '主单编号不能为空', trigger: 'blur' }],
  orderTime: [{ required: true, message: '采购时间不能为空', trigger: 'blur' }],
  supplierId: [{ required: true, message: '供应商编号不能为空', trigger: 'blur' }],
  totalPrice: [{ required: true, message: '合计价格不能为空', trigger: 'blur' }],
  remark: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  creator: [{ required: true, message: '创建者不能为空', trigger: 'blur' }],
  createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }]
})

const invoiceFormRules = reactive({
  id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
  invoiceNumber: [{ required: true, message: '发票编号不能为空', trigger: 'blur' }],
  supplierId: [{ required: true, message: '供应商编号不能为空', trigger: 'blur' }],
  invoiceValue: [{ required: true, message: '发票金额不能为空', trigger: 'blur' }],
  fileUrl: [{ required: true, message: '附件 URL 不能为空', trigger: 'blur' }],
  createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }]
})

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const subTabsName1 = ref('purchaseOrder')
const subTabsName2 = ref('invoice')
const subTabsName3 = ref('supplierSendOrder')
let CheckInvoiceId = ref('')
let purchaseOrderIds = [] // 定义一个数组
const approvalOpinion = ref('') // 审批意见数据属性

/** 添加/修改操作 */
const SupplierSendFormRef = ref()
const PurPurchaseOrderFormRef = ref()
const openForm = (type: string, id?: number) => {
  SupplierSendFormRef.value.open(type, id)
}
const PurPurchaseOpenForm = (type: string, id?: number) => {
  PurPurchaseOrderFormRef.value.open(type, id)
}
const props = defineProps<{
  taskId: string // 流程任务ID
}>()
/** 打开弹窗 */
const open = async (type: string, id: string) => {
  dialogVisible.value = true
  dialogTitle.value = '详情'
  formType.value = type
  CheckInvoiceId.value = id
  // 修改时，设置数据
  if (id) {
    loading.value = true
    try {
      // id为发票审核单编号   获取采购单信息
      // console.log('id:', id)
      list.value = await PurPurchaseOrderApi.getPurPurchaseOrderByCheckInvoiceId(id)
      // console.log("list:",list.value)
      // 获取发票信息
      invoiceList.value = await InvoiceApi.getInvoiceListByCheckInvoiceId(id)
      // console.log("发票信息：",invoiceList.value)
      // 获取采购单list 中的所有采购单编号
      // console.log('采购单id1', purchaseOrderIds)
      list.value.forEach((item) => {
        purchaseOrderIds.push(item.id) 
      } )
      // console.log('采购单id', purchaseOrderIds)
      // 获取随货同行单信息 参数purchaseOrderIds
      supplierSendOrderList.value = await SupplierSendOrderApi.getSupplierSendOrderItemListByPurchaseOrderIds(purchaseOrderIds)
      // 清空purchaseOrderIds
      purchaseOrderIds = []
      // console.log('采购单信息', list.value)
      // console.log('发票信息', invoiceList.value)
    } finally {
      loading.value = false
    }
  }
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 确认按钮 改发票审核状态为  通过
const submitForm = async () => {
  // loading.value = true
  try {
    // 提交表单
    await message.confirm('确认通过？', '提示')
    // 修改发票审核状态为 通过
    // console.log('CheckInvoiceId.value:', CheckInvoiceId.value)
    // console.log('props.taskId:', props.taskId)
    await InvoiceIntegrationApi.updateInvoiceCheckListStatusByCheckInvoiceId(CheckInvoiceId.value,'3',props.taskId,approvalOpinion.value)
    // console.log(12)
    message.success('审核成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  }finally {
    loading.value = false
  }
}

const handleReject = async () => {
  try {
    // 修改发票审核状态为 未通过
    await InvoiceIntegrationApi.updateInvoiceCheckListStatusByCheckInvoiceId(CheckInvoiceId.value,'2',props.taskId,approvalOpinion.value)
    message.success('修改成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  }finally {
    loading.value = false
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style scoped>
.section-title {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: bold;
}
</style>